<template>
  <free-app bgType="image" :showNavbar="false">
    <wd-navbar
      safeAreaInsetTop
      :bordered="false"
      custom-style="background-color: transparent !important;"
    >
      <template #left>
        <view
          class="color-text-1 text-[34rpx] flex items-center font-bold"
          @click="jumpTochoose"
        >
          <view class="flex items-center"> 永丰手机维修（芦墟镇） </view>
          <image
            class="w-[18rpx] h-[12rpx] ml-[6rpx]"
            src="/static/images/icon/arrow.png"
          ></image>
        </view>
      </template>
    </wd-navbar>
    <view class="p-3 flex flex-col gap-3">
      <!-- serach -->
      <SearchBox></SearchBox>
      <wd-swiper
        :list="swiperList"
        autoplay
        v-model:current="current"
        :indicator="{ type: 'dots-bar' }"
        @click="handleClick"
        @change="onChange"
      ></wd-swiper>
    </view>
    <view class="flex flex-col gap-[40rpx] px-3">
      <view class="flex flex-col gap-[20rpx] rounded-3 primary-bg-1 p-3">
        <view class="flex justify-between items-center">
          <text>新品推荐</text>
          <view
            @click="jumpToNew()"
            class="text-[20rpx] font-400 color-text-3 flex items-center"
            >查看更多
            <image
              src="/static/images/icon/right.png"
              class="size-[24rpx]"
              mode="scaleToFill"
          /></view>
        </view>
        <view class="grid grid-cols-3">
          <view
            class="flex flex-col gap-[8rpx] items-center"
            v-for="item in swiperList"
            :key="item"
          >
            <image
              :src="item"
              class="size-[204rpx] rounded-[10rpx]"
              mode="scaleToFill"
            />
            <view class="flex flex-col gap-[4rpx] items-center">
              <text class="mb-[4rpx] text-24rpx text-ellipsis"
                >移修用于苹果 11</text
              >
              <GsMoney
                :money="76"
                moneySize="32rpx"
                :showUnitIcon="true"
                moneyUnitSize="24rpx"
              ></GsMoney>
            </view>
          </view>
        </view>
      </view>
      <view class="flex flex-col gap-[20rpx] rounded-3 primary-bg-2 p-3">
        <view class="flex justify-between items-center">
          <text>爆款产品</text>
          <view
            @click="jumpToNew()"
            class="text-[20rpx] font-400 color-text-3 flex items-center"
            >查看更多
            <image
              src="/static/images/icon/right.png"
              class="size-[24rpx]"
              mode="scaleToFill"
          /></view>
        </view>
        <view class="grid grid-cols-2 gap-[20rpx]">
          <view
            class="flex flex-col gap-2 p-2 items-center flex-1 bg-white rounded-[20rpx]"
            v-for="(item, index) in swiperList"
            :key="index"
          >
            <image
              :src="item"
              class="size-[285rpx] rounded-[10rpx]"
              mode="scaleToFill"
            />
            <view class="flex flex-col gap-[12rpx] items-start w-full">
              <text class="mb-[4rpx] text-24rpx text-ellipsis"
                >移修用于苹果 11</text
              >
              <GsMoney
                :money="76"
                moneySize="32rpx"
                :showUnitIcon="true"
                moneyUnitSize="24rpx"
              ></GsMoney>
            </view>
          </view>
        </view>
      </view>
    </view>
  </free-app>
</template>

<script setup>
import { ref } from "vue";
import SearchBox from "@/components/search-box/index.vue";
import GsMoney from "@/components/GsMoney/index.vue";
import { onLoad } from "@dcloudio/uni-app";
import { onShow } from "@dcloudio/uni-app";
const current = ref(0);

const swiperList = ref([
  "/static/images/logo.png",
  "/static/images/logo.png",
  "/static/images/logo.png",
]);
function handleClick(e) {
  console.log(e);
}
function onChange(e) {
  console.log(e);
}
const jumpToNew = () => {
  return;
  uni.navigateTo({ url: "/pages/" });
};
const jumpTochoose = () => {
  uni.navigateTo({ url: "/pagesChoose/index" });
};
const getHomeFun = async () => {
  console.log(1);
};
onLoad(async () => {
  uni.$on("refreshhome", () => {
    getHomeFun();
  });
});
// onShow(async () => {
//   uni.$on("refreshhome", () => {
//     getHomeFun();
//   });
// });
</script>

<style lang="scss" scoped>
.card-swiper {
  --wot-swiper-radius: 0;
  --wot-swiper-item-padding: 0 24rpx;
  --wot-swiper-nav-dot-color: #e7e7e7;
  --wot-swiper-nav-dot-active-color: #4d80f0;
  padding-bottom: 24rpx;
  :deep(.custom-indicator-class) {
    bottom: -16px;
  }
  :deep(.custom-image) {
    border-radius: 12rpx;
  }
  :deep(.custom-image-prev) {
    // height: 168px !important;
  }
}
</style>
